<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>出差补助单</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/my/apply.css" />
    <script src="../../../script/widget/include.js"></script>
    <link rel="stylesheet" href="../../../css/wangImgEnlarge.css" />
    <style>
        .apply {
            padding: 8px 20px 5px 20px;
        }

        .apply p {
            margin: 0.3rem 0;
            font-size: 0.6rem;
        }

        .apply .content {
            float: right;
        }

        body .sign-class .layui-layer-content {
            height: 208px!important;
        }

        body .sign-class .layui-layer-btn {
            padding-top: 0;
            padding-bottom: 0;
        }

        body .sign-class .layui-layer-btn .layui-layer-btn0 {
            border: 1px solid #808080!important;
            background-color: white!important;
            color: #333;
        }

        body .sign-class .layui-layer-btn .layui-layer-btn1 {
            background-color: #1E9FFF;
            color: white;
        }
    </style>
</head>

<body style="cursor: pointer">
    <ul class="aui-list aui-form-list">
        <!-- 1.审批轨迹start -->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(一)</span>审批轨迹</div>
        </li>
        <li class="aui-list-item">
            <div class="apply_style apply" id="approve_info">
                <p><label><span id="book_user_name">---</span><span>&emsp;发起审批&emsp;&emsp;</span></label><label class="content" id="create_time">---</label></p>
                <!--<p><label>审批人</label><label class="content">--</label></p>-->
            </div>
        </li>

        <!--2.申请单详情start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(二)</span>出差补助详情</div>
        </li>
        <li class="aui-list-item" id="order_list">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">出差申请单</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span id="request_code" style="color:#B6B6B6;"></span></div>
                </div>
            </div>
        </li>


        <!--3.出行时间start-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(三)</span>出行时间</div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title" style="color:#B6B6B6;">出行开始时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon start-time"><span id="travel_start_time" style="color:#B6B6B6;"></span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title " style="color:#B6B6B6;">出行结束时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span id="travel_end_time" style="color:#B6B6B6;"></span></div>
                </div>
            </div>
        </li>

        <!--4.报销单信息录入-->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;" id="allowance_detail">
            <div><span style="letter-spacing: 5px;">(四)</span>报销单信息录入</div>
        </li>

        <!-- 5.报销总金额 start -->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(五)</span>报销总金额</div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title" style="color:#B6B6B6;">补助总额（元）</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon start-time"><span style="color:#B6B6B6;" id="travel_allowance"></span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title " style="color:#B6B6B6;">节约归己（元）</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;" id="economy_sum"></span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner " style="">
                <div class="aui-list-item-title " style="color:#B6B6B6;">总金额（元）</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;" id="total_money"></span></div>
                </div>
            </div>
        </li>
        <!-- 报销总金额 end -->


        <!-- 6.审批签字 -->
        <li class="aui-list-header" style="background: #F5F5F5;color:#B6B6B6;">
            <div><span style="letter-spacing: 5px;">(六)</span>审批签字</div>
        </li>
        <li class="aui-list-item">
            <div class="apply_style apply" id="sign_info">
            </div>
        </li>

    </ul>

    <!--7.审核按钮等-->
    <div class="aui-content-padded" style="text-align: center;">
        <p id="approve_option"></p>
    </div>

    <div style="padding:8%;display:none;" id="rejectCause">
        <div class="aui-list-item-inner">
            <div class="aui-list-item-input" style="">
                <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" checked value="价格太高"> 价格太高</label>
                <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" value="出差任务取消"> 出差任务取消</label>
                <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" value="出差计划可能变动"> 出差计划可能变动</label>
                <label class="aui-show aui-margin-t-10"><input class="aui-radio" type="radio" name="demo1" value="超出可审批权限范围"> 超出可审批权限范围</label>
            </div>
        </div>
    </div>
    <div class="htmleaf-container" id="signPass" style="display:none;">
        <div class="container">
            <div class="col-xs-12">
                <!--<h4>签名板</h4>-->
                <div class="js-signature" data-height="200" data-border="1px solid #e0e0e0" data-line-color="black" data-background="white" data-auto-fit="false"></div>
                <div id="signature" style="display: none">
                    <p><em>保存后，签名结果将显示在下面</em></p>
                </div>
            </div>
        </div>
    </div>
</body>

<!-- 1.审核轨迹模板 -->
<script id="approve_tpl" type="text/x-dot-template">
    {{ if(it.approve_record != '' && it.approve_record !== null){ }}
    {{ for(var prop=0, leng=it.approve_record.length; prop<leng; prop++) { }}
    {{ if(it.approve_record[prop]['approved_status'] == 0){ }}
    <p><label>[{{=prop+1}}级审批]{{= it.approve_record[prop]['user_name'] }}<span style="color: green;">&emsp;审批通过</span></label><label class="content">{{= it.approve_record[prop]['approved_time'] }}</label></p>
    {{ } else { }}
    <p><label>[{{=prop+1}}级审批]{{= it.approve_record[prop]['user_name'] }}<span style="color: red;">&emsp;审批驳回</span></label><label class="content">{{= it.approve_record[prop]['approved_time'] }}</label></p>
    <p><label>驳回原因：{{= it.approve_record[prop]['dismissal_cause'] }}</label></p>
    {{ } }}
    {{ } }}
    {{ } }}
</script>

<!-- 2.订单模板 -->
<script id="order_tpl" type="text/x-dot-template">
    {{ for(var prop in it) { }}


        {{ if (it[prop]['product_id'] == 1 ) { }}
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color: #6b6767;font-weight: bold;">订单号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color: #6b6767;font-weight: bold;">{{= it[prop]['user_orderid'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单总价</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it[prop]['order_total_price'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">飞机票</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">航班号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['flight_number'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">起飞日期</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['take_off_date'] }}{{= it[prop]['take_off_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">预定时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['create_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_plane" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">支付类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['pay_name'] }}</span></div>
                </div>
            </div>
        </li>
        {{ }else if (it[prop]['product_id'] == 3 ) { }}
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#6b6767;font-weight: bold;">订单号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#6b6767;font-weight: bold;">{{= it[prop]['user_orderid'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color: #B6B6B6;">订单总价</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color: #B6B6B6;">￥{{= it[prop]['order_total_price'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">酒店</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">酒店名称</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['hotel_name'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">入住时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['arrival_time'] }}{{= it[prop]['departure_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">预定时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['create_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_hotel" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">支付类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['pay_name'] }}</span></div>
                </div>
            </div>
        </li>
        {{ }else if (it[prop]['product_id'] == 5 ) { }}
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color: #6b6767;font-weight: bold;">订单号</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color: #6b6767;font-weight: bold;">{{= it[prop]['user_orderid'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单总价</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it[prop]['order_total_price'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">订单类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">火车票</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">车次</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['train_code'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">发车时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['train_date'] }}{{= it[prop]['train_start_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">预定时间</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['create_time'] }}</span></div>
                </div>
            </div>
        </li>
        <li class="aui-list-item order_train" style="display: none;">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title" style="color:#B6B6B6;">支付类型</div>
                <div class="aui-list-item-right">
                    <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it[prop]['pay_name'] }}</span></div>
                </div>
            </div>
        </li>
        {{ } }}

    {{ } }}
</script>

<!-- 4.1 报销单信息录入 - 基本信息-->
<script id="allowance_tpl" type="text/x-dot-template">
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">

            <div class="aui-list-item-title" style="color:#B6B6B6;">出差补助</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon start-time"><span style="color:#B6B6B6;"></span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">补助标准（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it['allowance_standard'] }}/天</span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">出差天数</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it['day_of_travel'] }}天</span></div>
            </div>
        </div>
    </li>
</script>

<!-- 4.2 报销单信息录入 - 酒店-->
<script id="detail_tpl" type="text/x-dot-template">
    {{ if(it.detail == '' || it.detail !== null){ }}
    {{ for(var prop=0, leng=it.detail.length; prop<leng; prop++) { }}
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">

            <div class="aui-list-item-title" style="color:#B6B6B6;">节约归己（{{= prop+1 }}）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon start-time"><span style="color:#B6B6B6;"></span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">酒店标准（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it.detail[prop]['hotel_standard'] }}/天</span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">实际费用（元）</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">￥{{= it.detail[prop]['real_fee'] }}/天</span></div>
            </div>
        </div>
    </li>
    <li class="aui-list-item">
        <div class="aui-list-item-inner " style="">
            <div class="aui-list-item-title " style="color:#B6B6B6;">入住天数</div>
            <div class="aui-list-item-right">
                <div class="aui-list-item-label-icon end-time"><span style="color:#B6B6B6;">{{= it.detail[prop]['number_of_days'] }}天</span></div>
            </div>
        </div>
    </li>
    {{ } }}
    {{ } }}
</script>

<!-- 6.审核签名模板 -->
<script id="approve_sign" type="text/x-dot-template">
    {{ if(it.approved_user != ''){ }}
    {{ for(var prop=0, leng=it.approve_record.length; prop<leng; prop++) { }}
    {{ if(it.approve_record[prop]['approved_status'] == 0){ }}
    {{ if(it.approve_record[prop]['sign_url'] != '' && it.approve_record[prop]['sign_url'] != null){ }}
    <p><label>[{{=prop+1}}级审批] {{= it.approve_record[prop]['user_name'] }}</label></p>
    <div style="height: 3rem;width: 3rem;">
        <img src="{{= it.approve_record[prop]['sign_url'] }}" style="max-width: 100%;max-height:100%;">
    </div>
    {{ } }}
    {{ }else{ }}
    <p><label>已驳回</label></p>
    {{ } }}
    {{ } }}
    {{ }else{ }}
    <p><label>暂无</label></p>
    {{ } }}
</script>

<!-- 7.审核按钮等-->
<script id="approve_option_tpl" type="text/x-dot-template">
    {{ if(it['status'] == 1 || it['status'] == 0){ }}
      {{ if(it['approve_info']['is_current'] == 1){ }}
      <div class="aui-btn aui-btn-inline aui-btn-info changeStatus" style="margin: 0 1rem;">
          <input type="hidden" value="0">
          通过申请
      </div>
      <div class="aui-btn aui-btn-info aui-btn-inline changeStatus">
          <input type="hidden" value="1">
          驳回申请
      </div>
      {{ } }}
    {{ } }}
</script>


</html>
<script type="text/javascript" src="../../../script/aui/api.js"></script>
<script type="text/javascript" src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../../script/extend/doT.min.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/config.js"></script>
<script type="text/javascript" src="../../../script/extend/date.js"></script>
<script type="text/javascript" src="../../../script/layer/layer.js"></script>
<script type="text/javascript" src="../../../script/extend/jq-signature.js"></script>
<script type="text/javascript" src="../../../script/extend/wangImgEnlarge.js"></script>
<script type="text/javascript" src="../../../service/index/allowance/allowanceInfo.js"></script>

<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        new allowanceInfo();
    }
</script>
